<template>
  <div>
    <div :id="itemval.id" style="width:800px;height:200px"></div>
  </div>
</template>
<script>
export default {
  props: {
    itemval: Object
  },
  data() {
    return {}
  },
  mounted() {
      console.log(this.itemval,'0909');
      
    this.drawLine()
  },
  methods: {
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById(this.itemval.id))
      var option1 = {
        title: { text: this.itemval.title},
        xAxis: {
          name: '时',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#d8d8d8' // x坐标轴的轴线颜色
            }
          },
          axisLabel: {
            show: true, //这行代码控制着坐标轴x轴的文字是否显示
            textStyle: {
              color: '#707070', //x轴上的字体颜色
              fontSize: '12' // x轴字体大小
            }
          },
          type: 'category',
          data: this.itemval.dataX
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {
            fontSize: 16
          },
          splitLine: {
            //  改变轴线颜色
            lineStyle: {
              // 使用深浅的间隔色
              color: '#edeeed'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#d8d8d8' // x坐标轴的轴线颜色
            }
          },
          axisTick: { show: false },
          axisLabel: {
            textStyle: {
              align: 'left',
              color: '#707070', //x轴上的字体颜色
              fontSize: '12' // x轴字体大小
            },
            formatter: '{value}',
            interval: 0,
            margin: 40
          }
        },
        series: [
          {
            data: this.itemval.dataY,
            type: 'line',
            smooth: false,
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#ff0000',
                lineStyle: {
                  color: '#ff0000'
                }
              }
            }
          }
        ]
      }
      //myChart.clear()
      myChart.setOption(option1) //展示
      myChart.resize()
    }
  }
}
</script>
<style>
</style>